/*
  学习目标：复用逻辑-renderProps
  本质:
    
   
*/
import React from "react";
import { RenderMouse } from "./renderProps/RenderMouse";

export default function App() {
  return (
    <div>
      <RenderMouse
        render={({ mouse, handleMouseMove }) => {
          return <Header mouse={mouse} handleMouseMove={handleMouseMove} />;
        }}
      />
      <RenderMouse
        // 2. 接收render属性, props.render是一个函数 , 返回html(JSX)
        render={({ mouse, handleMouseMove }) => {
          return <Main mouse={mouse} handleMouseMove={handleMouseMove} />;
        }}
      />
      <RenderMouse
        render={({ mouse, handleMouseMove }) => (
          <Footer mouse={mouse} handleMouseMove={handleMouseMove} />
        )}
      />
    </div>
  );
}

function Header({ mouse, handleMouseMove }) {
  return (
    <div onMouseMove={handleMouseMove}>
      <h1>
        x: {mouse.x} - y: {mouse.y}
      </h1>
    </div>
  );
}

function Main({ mouse, handleMouseMove }) {
  return (
    <div onMouseMove={handleMouseMove}>
      我是
      <h1>
        Main- x:{mouse.x} -y:{mouse.y}
      </h1>
    </div>
  );
}

function Footer({ mouse, handleMouseMove }) {
  return (
    <h1 onMouseMove={handleMouseMove}>
      Footer- x:{mouse.x} -y:{mouse.y}
    </h1>
  );
}
